<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <p>hash test</p>
  <button id="btn">修改hash</button>
</body>

<script>
  /**
   * hash修改：
   *      1. js修改url
   *      2. 手动修改url
   *      3. 浏览器前进/后退
   */

  window.onhashchange = event => {
    console.log('old url:', event.oldURL)
    console.log('new url:', event.newURL)

    console.log('hash:', location.hash)
  }

  window.addEventListener('DOMContentLoaded', () => {
    console.log('hash:', location.hash)
  })

  document.getElementById('btn').addEventListener('click', function() {
    location.hash = '#/user'
  })
</script>

</html>